<template>
  <div>
    <h1>app</h1>
    <!-- 
      插槽 
        1. 默认插槽
        2. 具名插槽
        3. 作用域插槽
     -->
    <A>
      <p>默认插槽数据111</p>
      <div>默认插槽数据222</div>
      <span>默认插槽数据333</span>
    </A>

    <hr />

    <B>
      <template v-slot:header>
        <header>header</header>
      </template>
      <!-- 废弃的用法，尽量不要用 -->
      <!-- <header slot="header">header</header> -->

      <template #footer>
        <footer>footer</footer>
      </template>
    </B>

    <hr />

    <C>
      <!-- 
        取了名字就是具名插槽，没有取名字就是默认插槽 
        
        一般会将最终要内容放在默认插槽，剩下内容放在具名插槽
      -->
      <div>content111</div>

      <template #header>
        <header>header</header>
      </template>

      <div>content222</div>

      <div>content333</div>
    </C>

    <hr />

    <D>
      <!-- 
        作用域插槽：依赖默认插槽或具名插槽
          作用：子组件给默认插槽和具名插槽传递参数（子向父通信）
      -->
      <!-- 具名插槽使用作用域插槽传递的数据 -->
      <!-- <template #header="scope">
        <header>header {{ scope.aaa }} {{ scope.bbb }}</header>
      </template> -->
      <template #header="{ aaa, bbb }">
        <header>header {{ aaa }} {{ bbb }}</header>
      </template>

      <!-- 默认插槽使用作用域插槽传递的数据 -->
      <!-- <template v-slot="scope">
        <div>content {{ scope.aaa }} {{ scope.bbb }}</div>
      </template> -->
      <!-- <template v-slot="{ aaa, bbb }">
        <div>content {{ aaa }} {{ bbb }}</div>
      </template> -->
      <!-- 默认插槽其实有名字，名字叫做default，但是可以省略不写 -->
      <!-- <template v-slot:default="{ aaa, bbb }">
        <div>content {{ aaa }} {{ bbb }}</div>
      </template> -->
      <template #default="{ aaa, bbb }">
        <div>content {{ aaa }} {{ bbb }}</div>
      </template>
    </D>
  </div>
</template>

<script>
import A from "./A";
import B from "./B";
import C from "./C";
import D from "./D";

export default {
  name: "App",
  components: {
    A,
    B,
    C,
    D,
  },
};
</script>

<style></style>
